Add keepMounted and itemProps to Vue API to enable sticky groups #576
Conversation
src/vue/VList.tsx
Outdated
| /** | ||
| * A function that provides properties/attributes for item element | ||
| */ | ||
| itemProps: Function as PropType<ItemProps>, |
There was a problem hiding this comment.
Could you try existed item prop instead of adding new prop? I don't think we need 2 props for 1 purpose.
| /** | |
| * A function that provides properties/attributes for item element | |
| */ | |
| itemProps: Function as PropType<ItemProps>, |
There was a problem hiding this comment.
Refs work a bit differently in Vue https://vuejs.org/guide/essentials/template-refs and there's no equivalent of forwardRef
Also, on native elements, the ref correctly points to the DOM element but for a Vue component, the structure changes and the ref points to the component's instance and you have to use .$el to actually get the DOM element.
Also while JSX is "supported", SFCs are the first-class way of building Vue applications and there refs are extracted from the template.
The item prop only accepts the native element and not user component like it does in React API perhaps for the reasons laid out above.
There was a problem hiding this comment.
Thanks for the replay.
Also while JSX is "supported", SFCs are the first-class way of building Vue applications and there refs are extracted from the template.
Okay, we have a plan to migrate to SFC (#556). So we need to complete it at first, and change item prop to accept element and component. You mean it's possible with SFC, right?
There was a problem hiding this comment.
@inokawa yes it is possible. Here's how one could do it using ref function: Playground
VirtualItem component accepts item prop which can be a string for native elements or the component itself. The setRef function will distinguish between the two and give you the correct DOM element be it a native element or a user component.
There was a problem hiding this comment.
@AmitJoki
Thank you. It's very helpful!
And I'm sorry for my late reply. Migrating to SFC may take a lot of time so I'll merge this PR anyway. And I may deprecate itemProps and merge it into item in near future.
inokawa
force-pushed
the
vue-sticky-groups
branch
from
3011c88 to
37dfe01
Compare
|
Released in |
I wanted to use virtua for the usecase of sticky groups + virtualized scrolls in Vue but found that the APIs for that is not yet there.
I have added
keepMountedfrom the React API and an additionalitemPropsto facilitate the Sticky Groups in Vue.I have also added a story for the same.
If the PR is okay in its direction, I can add some documentation as well if needed.